<template>
  <div class="container">
    <p v-color="c1">hello word</p>
    <p v-color="c2">hello word</p>
    <p v-color="c3">hello word</p>
    <hr />
    <input type="text" v-focus />
    <my-test></my-test>
  </div>
</template>

<script>
import MyTest from "./components/MyTest.vue";
export default {
  components: { MyTest },
  data() {
    return {
      c1: "red",
      c2: "blue",
      c3: "green",
    };
  },
  directives: {
    // 对象写法
    // 指令名：{
    //   bind(el,obj ) {}
    //   inserted (el,obj ) {}
    //   update (el,obj ) {}
    //   componentUpdated(el,obj ) {}
    //   unbind(){}

    // color: {
    //   bind(el, obj) {
    //     //el 表示使用指令的元素
    //     //obj.value 表示指令的值
    //     el.style.color = obj.value;
    //   },
    // update(el,obj){
    //   el.style.color.obj.value
    // }
    // },

    //函数写法
    //han
    color(el, obj) {
      el.style.color = obj.value;
    },
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

<style>
</style>